<!-- 路由的两个注意点：
        1. 路由组件通常放在pages或views文件夹，而一般组件通常放在components文件夹
            如何区分一个组件是一般组件还是路由组件？看引用方式，一般组件是以<Person/>标签引入，而路由组件是以createRouter的方式引入
        2. 通过点击导航，切换路由，组件默认是被销毁的，需要的时候再去挂载
-->
<template>
    <div id="app">
    <div class="header">
        <h1>Vue路由测试</h1>
    </div>
    
    <div class="nav">
        <!-- 跳转功能使用 RouterLink 标签完成， 路由标签使用to -->
        <RouterLink class="nav-button" active-class="active" to="/">首页</RouterLink>
         <!-- to的第二种写法，传入一个对象 -->
        <RouterLink class="nav-button" active-class="active" :to="{path:'/news'}">新闻</RouterLink>
        <!-- to的第二种写法中，可以传入一个name，来引入 -->
        <RouterLink class="nav-button" active-class="active" :to="{name:'/guanyu'}">关于</RouterLink>
    </div>

    <div class="content">
        <!-- 路由展示的内容使用RouterView表示，运行时被路由内容替换 -->
        <RouterView/>
    </div>
</div>

</template>

<script lang="ts" setup>
   import {RouterLink, RouterView} from 'vue-router' 
</script>

<style>
    /* 基本样式重置 */
    body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    }

    /* 顶部标题栏 */
    .header {
    background: linear-gradient(to right, #d3d3d3, #a9a9a9);
    padding: 15px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    }

    /* 导航栏按钮 */
    .nav {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    }

    .nav-button {
    background-color: #8fb08c;
    border: none;
    color: white;
    padding: 10px 20px;
    margin: 0 10px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    }

    .nav-button:hover {
    background-color: #666;
    }

    .nav-button.active {
    background-color: #b9a06a;
    }

    /* 主内容区域 */
    .content {
    background-color: white;
    margin: 0 auto;
    padding: 50px;
    width: 60%;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .content p {
    font-size: 22px;
    font-weight: bold;
    color: #444;
    }
</style>
